<template>
  <el-drawer
    v-model="showDrawer"
    :title="$t('接收')"
    size="35%"
    @close="emit('close')"
  >
    <el-card>
      <el-form label-position="top">
        <el-form-item :label="$t('币种')">
          <el-select
            style="width: 100%"
            v-model="selectCoinName"
            :placeholder="$t('请选择币种')"
            @change="changeCoin"
          >
            <el-option
              v-for="item in coins"
              :key="item.coin_name"
              :label="item.coin_name"
              :value="item.coin_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-radio-group
            v-if="sonCoins?.length"
            v-model="selectChainName"
            @change="changeSonCoin"
          >
            <el-radio-button v-for="item in sonCoins" :label="item.chain_name"
              >{{ item.chain_alias }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="$t(`扫描二维码接收${selectCoinName}`)">
          <div class="qrCodeRow">
            <qrcode-vue
              :value="receiveInfo.address"
              :size="150"
              level="H"
            ></qrcode-vue>
            <el-button
              style="margin-top: 1.25rem"
              type="primary"
              @click="copyAddress"
              >{{ $t("复制地址") }}</el-button
            >
          </div>
        </el-form-item>
        <el-form-item :label="$t('接收地址')">
          <div class="addrRow">
            <span style="word-break: break-all">{{ receiveInfo.address }}</span>
            <el-button
              text
              icon="CopyDocument"
              @click="copyAddress"
              style="margin-left: 10px; color: #f56c6c"
            />
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </el-drawer>
</template>
<script setup>
import { ref, reactive, watch, toRefs, computed } from "vue";
import { getWalletReceiveNewApi } from "@/api/wallet/index";
import { useI18n } from "vue-i18n";
import _ from "lodash";
import QrcodeVue from "qrcode.vue";
import { useUserStore } from "@/store/modules/user";
const { t } = useI18n();

const useUser = useUserStore();
const coins = computed(() => {
  return useUser.currentCoinListInfo.value;
});
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  currentCoinInfo: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["close"]);
const sonCoins = ref([]);
const selectCoinName = ref("");
const selectChainName = ref("");
//设置选择的币种值
const setCoinInfo = (index = 0) => {
  if (index > -1) {
    selectCoinName.value = coins.value.length && coins.value[index]?.coin_name;
    setChainInfo(index);
  }
};
const setChainInfo = (index) => {
  if (index > -1) {
    sonCoins.value = coins.value.length && coins.value[index]?.chains;
    selectChainName.value = sonCoins.value[0]?.chain_name;
  }
};
const currentCoinIndex = computed(() => {
  return (
    coins?.value?.findIndex(
      (i) => i.coin_name === props?.currentCoinInfo?.coin_name
    ) || -1
  );
});

//监听传输进来的数据
watch(
  () => currentCoinIndex,
  (newVal) => {
    if (newVal.value > -1) {
      setCoinInfo(newVal.value);
    } else {
      setCoinInfo(0);
    }
  },
  { immediate: true, deep: true }
);

const receiveInfo = reactive({
  address: "",
  qrCode: "",
});
const getWalletReceiveInfo = async () => {
  const res = await getWalletReceiveNewApi({
    coin_name: selectCoinName.value,
    chain_name: selectChainName.value,
  });
  receiveInfo.address = res.address;
};
const copyAddress = () => {
  navigator.clipboard.writeText(receiveInfo.address);
};
//修改币种时触发
const changeCoin = (e) => {
  selectCoinName.value = e;
  sonCoins.value = coins.value.find((i) => i.coin_name === e).chains;
  selectChainName.value = sonCoins.value[0].chain_name;

  getWalletReceiveInfo();
};
// 修改链的时候触发
const changeSonCoin = async (e) => {
  selectChainName.value = e;
  getWalletReceiveInfo();
};

const showDrawer = ref(false);
watch(
  () => props.show,
  (newVal) => {
    showDrawer.value = newVal;

    if (newVal) {
      getWalletReceiveInfo();
    }
  }
);
</script>
<style lang="scss">
.addrRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.qrCodeRow {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1.25rem;
}
</style>
